<template>
	<view class="shouYi">
		<view style="width:100%;" :style="{height:heightChart + 'rpx'}">
			<l-echart ref="chartRef"></l-echart>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue';


	import {
		ref,
		onMounted
	} from 'vue'
	import * as echarts from 'echarts'


	const heightChart = ref(422)

	// 获取容器的dom元素
	const chartRef = ref(null)
	// echart图表的配置信息
	const Options = ref({})

	onMounted(() => {
		addPie()
	})

	// 加载饼图结构
	const addPie = async () => {
		const MyPie = await chartRef.value.init(echarts)
		Options.value = {
			xAxis: {
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				axisLine: {
					lineStyle: {
						color: '#271C71' //x轴的颜色
					},
				},
				axisLabel: {
					color: "#5A669E"
				}
			},
			yAxis: {
				type: 'value',
				axisLabel: {
					color: "#5A669E"
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: '#271C71', // 设置 X 轴网格线颜色为红色
					}
				},
			},
			grid: {
				top: '12%',
				left: '12%',
				right: '10%',
				bottom: '12%'
			},
			series: [{
				data: [820, 932, 901, 934, 1290, 1330, 1320],
				type: 'line',
				smooth: true,
				itemStyle: {
					normal: {
						color: "#A425FF",
						lineStyle: {
							color: "#463EFF"
						}
					}
				},

				label: {
					// show: true,
				},

				symbolSize: 10,
			}]
		};
		MyPie.setOption(Options.value)
	}
</script>

<style>
	.shouYi {
		padding: 20rpx;
		box-shadow: inset 0rpx 0rpx 32rpx 14rpx rgba(43, 23, 147, 0.59);
	}
</style>